<!--style-->
<style>
    #area-first .mainer {
        padding: 8px;
    }

    #area-first .unit {
        border-bottom: 1px solid #f9f9f9;
        padding-left: 8px;
        padding-bottom: 8px;
        margin-bottom: 8px;
        margin-top: 4px;
    }

    #area-first .unit:nth-last-of-type(1) {
        border-bottom: none;
        padding-bottom: 0;
    }

    #area-first .unit .l {
        width: 500px;;
    }

    #area-first .unit .r {
        width: 120px;;
    }

    #area-first .unit .r .l, #area-first .unit .r .r {
        width: auto;
    }

    #area-first .unit .title {
        display: inline-block;
        *display: inline;
        height: 32px;
        line-height: 32px;
        font-size: 18px;
        font-weight: bold;
        color: #08c;
    }

    #area-first .hint-hover {
        color: #999;
        margin: 0 0 0 8px;
        cursor: default;
    }

    #area-first .hint-hover .icon {
        margin-right: 2px;
    }
</style>
<!--style-->

<!--html-->
<div id="block-title-banner">
    <p>设置</p>

    <div>
        <a href="user">PowerOJ</a>
        <span class="d">Setting</span>
    </div>
    <span class="clearfix"></span>
</div>
<div id="block-banner-right" class="block banner">
    <i class="location"></i>
</div>

<div class="block">
    <div class="mainer">
        <p class="alert alert-info">
            配置信息存储于用户本地，清空浏览器数据将会导致配置信息丢失。
        </p>
    </div>
</div>

<div id="area-first"></div>

<div class="block">
    <div class="mainer">
        <p class="alert alert-info">
            部分选项需重新载入后生效。
        </p>
    </div>
</div>

<div id="temp-unit-setting" class="hidden">
    <div class="unit" data-title="[title]" data-value="[value]" data-key="[key]">
        <div class="l">
            <p class="title">[title]
            </p>
            <span class="hint-hover" data-title="[desc]"><i class="icon grey icon-question-sign"></i>详细</span>
        </div>
        <div class="r">
            <div class="switch [active]">
                <p>是<b></b>否</p>

                <div></div>
            </div>
            <span class="clearfix"></span></div>
        <span class="clearfix"></span>
    </div>
</div>

<!--html-->

<!--script-->
<script>
    system.tv = function () {
        //set handle
        var area = $('#area-first');
        //vars
        var d = [
            /*{
                title: '播放器',
                subtitle: 'Player',
                content: [
                    {
                        key: 'player.kagamiAllowed',
                        title: '使用新版播放器',
                        desc: '使用最新版本播放器(Kagami)播放视频。#默认勾选。'
                    }
                    ,
                    {
                        key: 'player.autoNextPartAllowed',
                        title: '自动换P',
                        desc: '在完成当前P播放后，将自动跳转至下一P(或第一P，若当前P已是最后一P)。#该选项在视频不包含任何Part时不会生效。#默认勾选。'
                    }
                    ,
                    {
                        key: 'player.autoplayAllowed',
                        title: '自动开始播放',
                        desc: '在播放器载入后自动开放播放视频。#默认不勾选。'
                    }
                    ,
                    {
                        key: 'player.autoWebFullscreenAllowed',
                        title: '自动网页全屏',
                        desc: '在播放器载入后自动切换至网页全屏模式。#默认不勾选。'
                    }
                ]
            }
            ,*/
            {
                title: '评论',
                subtitle: 'Comment',
                content: [
                    {
                        key: 'comment.autoShowCommentAllowed',
                        title: '自动展开评论',
                        desc: '在页面载入后自动加载评论。#默认勾选。'
                    }
                    /*,
                    {
                        key: 'comment.videoViewAllowed',
                        title: '快捷播放视频',
                        desc: '在评论区开启视频快速预览功能。#默认不勾选。'
                    }*/
                ]
            }
            ,
             {
             title: '会员中心',
             subtitle: 'Member Center',
             content: [
             {
             key: 'globe.receivePushAllowed',
             title: '接收推送信息',
             desc: '接收服务器的新稿件推送。#默认勾选。'
             }
             ,
             {
             key: 'globe.receiveStrangersMailAllowed',
             title: '接收陌生人私信',
             desc: '接收陌生人发送的私信。#取消勾选后将拒收来自陌生人的私信(对方不会获知)。#取消勾选后将无法使用漂流瓶系统。#默认勾选。'
             }
             ]
             }
            ,
            {
                title: '杂项',
                subtitle: 'Other',
                content: [
                    {
                        key: 'globe.guideFloatAllowed',
                        title: '导航栏浮动显示',
                        desc: '导航栏在页面顶端浮动显示。#默认不勾选。'
                    }
                    ,
                    {
                        key: 'globe.debug',
                        title: '启用Debug模式',
                        desc: '开启Debug模式以进行开发及调错。#该选项会大幅度降低页面执行效率与稳定性。#若您并非开发人员，请勿勾选该选项。#默认不勾选。',
                        ensure: true
                    }
                ]
            }
        ];
        //prepare
        var html = '';
        var temp = $('#temp-unit-setting').html();
        $.each(d, function (a, b) {
            html += '<div class="block">'
                    + '<div class="banner">'
                    + '<p class="tab fixed">' + b.title + '<span class="hint">' + b.subtitle + '</span></p>'
                    + '</div>'
                    + '<div class="mainer">';
            $.each(b.content, function (c, d) {
                var key = d.key.split('.');
                var val = 0;
                //check value
                if (config[key[0]] && config[key[0]][key[1]]) {
                    val = 1;
                } else {
                    val = 0;
                }
                html += temp
                        .replace(/\[value\]/g, val)
                        .replace(/\[key\]/g, d.key)
                        .replace(/\[title\]/g, d.title)
                        .replace(/\[desc\]/g, (d.desc ? d.desc.replace(/\#/g, '<br />') : '未包含任何合法信息'))
                        .replace(/\[active\]/g, (val ? 'active' : ''))
                ;
            });
            html += '</div></div>';
        });
        area.html(html);
        //bind action
        area
            //button
                .delegate('div.switch', 'click', function () {
                    //set handle
                    var elem = $(this);
                    var obj = elem.closest('div.unit');
                    //check value
                    if (elem.hasClass('active')) {
                        //cancel
                        elem.removeClass('active');
                        var val = 0;
                    } else {
                        //ok
                        elem.addClass('active');
                        var val = 1;
                    }
                    obj.data().value = val;
                    //info
                    var text = 'info::' + obj.data().title + '：' + (obj.data().value ? '是' : '否') + '。';
                    $.info(text);
                    //save
                    var key = obj.data().key.split('.');
                    config[key[0]][key[1]] = val;
                    $.save('config');
                })
            //hover
                .find('span.hint-hover')
                .hoverInfo({
                    type: 'info',
                    fadeout: 0
                })
        ;
    }();
</script>
<!--script-->